@use "@/common/styles/colors"

.view-container
  display: flex
  flex-direction: column
  height: 100vh
  width: 100%
  flex: 1
  overflow: hidden
  transition: all 0.3s ease

  &.fullscreen
    position: fixed
    top: 0
    left: 0
    width: 100vw
    height: 100vh
    z-index: 1000

.exit-fullscreen-btn
  position: fixed
  top: 1rem
  right: 1rem
  z-index: 1001
  background-color: rgba(0, 0, 0, 0.7)
  border: 1px solid colors.$darker-gray
  border-radius: 8px
  padding: 0.5rem
  cursor: pointer
  display: flex
  align-items: center
  justify-content: center
  transition: all 0.2s ease
  backdrop-filter: blur(10px)

  svg
    width: 1.5rem
    height: 1.5rem
    color: colors.$white

  &:hover
    background-color: rgba(0, 0, 0, 0.9)
    border-color: colors.$primary
    transform: scale(1.05)

    svg
      color: colors.$primary

  &:active
    transform: scale(0.95)

.view-layouter
  position: relative
  height: calc(100vh - 3.5rem)
  width: 100%
  overflow: hidden

  .view-container.fullscreen &
    height: 100vh

  &.single
    .session-renderer
      &.visible
        opacity: 1
        pointer-events: auto

      &.hidden
        opacity: 0
        pointer-events: none

  &[class*="grid-"]
    display: grid
    gap: 2px
    background-color: colors.$darker-gray

  &.resizing
    .session-renderer
      pointer-events: none

  &.grid-2x1
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr

  &.grid-2x2
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr 1fr

  &.grid-3
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr 1fr

  &.grid-5
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr 1fr 1fr

  &.grid-3x2
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr 1fr 1fr

  &.grid-2x3
    grid-template-columns: 1fr 1fr 1fr
    grid-template-rows: 1fr 1fr

  &.grid-3x3
    grid-template-columns: 1fr 1fr 1fr
    grid-template-rows: 1fr 1fr 1fr

  &.grid-4x2
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr 1fr 1fr 1fr

.session-renderer
  background-color: colors.$terminal
  overflow: hidden

  &.visible
    opacity: 1
    pointer-events: auto

  &.hidden
    opacity: 0
    pointer-events: none

.grid-resizer
  background: transparent
  transition: background-color 0.2s ease
  user-select: none

  &:hover
    background-color: colors.$primary !important

  &:active, .view-layouter.resizing &
    background-color: colors.$primary !important

  &.vertical
    cursor: col-resize

  &.horizontal
    cursor: row-resize

.view-layouter.resizing
  *
    user-select: none !important
    pointer-events: none !important

  &.resizing-vertical
    cursor: col-resize !important

    *
      cursor: col-resize !important

  &.resizing-horizontal
    cursor: row-resize !important

    *
      cursor: row-resize !important